<div class="fsh-rightPanel">
    <div class="layui-anim layui-anim-upbit">
        <div class="layui-btn-group">
            <button class="layui-btn" id="btn-expand">全部展开</button>
            <button class="layui-btn" id="btn-fold">全部折叠</button>
            <button class="layui-btn" id="btn-refresh">刷新表格</button>
            <button class="layui-btn btn-primary" id="menu_add">新建顶级菜单</button>
            <button class="layui-btn btn-primary" id="flushPerCache">刷新缓存</button>
        </div>
        <table id="auth-table" class="layui-table" lay-filter="mainList"></table>
    </div>
</div>


<script>
    layui.use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var tableObj;
        // 渲染表格
        layer.load(2);
        var renderTable = function () {
            tableObj = treetable.render({
                treeColIndex: 0,
                treeSpid: 0,
                treeIdName: 'permissionKey',
                treePidName: 'parent_key',
                elem: '#auth-table',
                url: context + '/api/syspermission/list',
                page: false,
                treeDefaultClose: true,
                cols: [[ //表头
                    {field: 'permissionName', title: '菜单名称', align: 'left', width: 300},
                    {field: 'permissionKey', title: '菜单编号', align: 'center'},
                    {field: 'parent_key', title: '菜单父编号', align: 'center'},
                    {field: 'url', title: '请求地址', align: 'center'},
                    {field: 'sort', title: '排序', align: 'center'},
                    {field: 'level', title: '层级', align: 'center'},
                    {field: 'status', title: '状态', align: 'center'},
                    {
                        field: 'lock', title: '操作', width: 200, align: 'center', unresize: true, align: 'center',
                        templet: function (d) {
                            return '<a href="javascript:;" class="font-primary" lay-event="update">修改</a>'
                                + '<a href="javascript:;" class="font-primary" lay-event="del">删除</a>'
                                + '<a href="javascript:;" class="font-primary" lay-event="new">添加子权限</a>';
                        }
                    }
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        }

        renderTable();
        $('#flushPerCache').click(function () {
            $.ajax({
                url: context + '/api/syspermission/flush',
                type: 'get',
                success: function(data){
                    if(data.success){layer.msg("刷新缓存成功!");}
                }
            });
        });
        $('#btn-expand').click(function () {
            treetable.expandAll('#auth-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#auth-table');
        });
        $('#btn-refresh').click(function () {
            renderTable();
        });
        // 添加
        $("#menu_add").click(function () {
            var subData = {
                addSub: true,
                parent_key : 0,
                parent_keys : 0,
                permissionKey : "",
                parent_name: "顶级",
                url: "#"
            };
            showDialog({
                title: '新建菜单'
                , template: 'add'
                , tableObj: tableObj
                , htmlData: subData
                , saveUrl: context + '/api/syspermission'
                , type: "post"
                , dataType: 'json'

            })
        });

        //表格内部操作按钮监听
        table.on('tool(mainList)', function (obj) { //注：tool是工具条事件名，mainList是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据

            var layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'new') {
                var subData = {
                    addSub: true,
                    parent_key :data.permissionKey,
                    parent_keys :data.parent_keys + "," + data.permissionKey,
                    permissionKey : data.permissionKey + "_",
                    parent_name: data.permissionName
                };
                showDialog({
                    title: '新建子菜单'
                    , template: 'add'
                    , tableObj: tableObj
                    , htmlData: subData
                    , saveUrl: context + '/api/syspermission'
                    , type: "post"
                    , dataType: 'json'
                })
            }else if (layEvent === 'update') {
                data.parent_name = data.parent_key;
                showDialog({
                    title: '编辑菜单'
                    , template: 'add'
                    , tableObj: tableObj
                    , htmlData: data
                    , saveUrl: context + '/api/syspermission'
                    , type: "PATCH"
                    , dataType: 'json'
                    // , yes: function (index, layero) {
                    //     layui.form.on('submit(*)', function (data) {
                    //         $.ajax({
                    //             url: context + '/api/syspermission',
                    //             type: 'PATCH',
                    //             async: false,
                    //             dataType: 'json',
                    //             contentType: "application/json;charset-UTF-8",
                    //             data: JSON.stringify(data.field),
                    //             success: function (result) {
                    //                 if (result.success) {
                    //                     layer.msg("修改成功");
                    //                     layer.close(index);
                    //                     renderTable();
                    //                 } else {
                    //                     layer.msg("修改失败");
                    //                 }
                    //             },
                    //             error: function () {
                    //                 layer.msg("修改异常");
                    //             }
                    //         })
                    //     });
                    //     //表单验证
                    //     layui.form.validate();//默认form名称为add_form（可不填写）
                    // }

                })
            }
            // 删除
            else if (layEvent === 'del') {
                layer.confirm('确认删除此帐号？', {
                    icon: 7,
                    title: "提示",
                    btn: ['确认', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: context + '/api/syspermission/' + data.permission_id,
                        type: "DELETE",
                        success: function (result) {
                            if (result.success && result.data > 0) {
                                layer.msg("删除成功");
                                renderTable();
                            } else {
                                layer.msg("删除失败");
                            }
                        },
                        error: function () {
                            layer.msg("删除异常");
                        }
                    })
                }, function () {
                    layer.closeAll();
                });
            }


        });
    });
</script>
<style>
    .treeTable-icon .layui-icon-layer:before {
        content: "\e638";
    }

    /** 展开 */
    .treeTable-icon.open .layui-icon-layer:before {
        content: "\e638";
    }

    .treeTable-icon .layui-icon-file:before {
        content: "\e621";
    }

    /** 未展开 */
    .treeTable-icon .layui-icon-triangle-d:before {
        content: "\e623";
    }

    /** 展开 */
    .treeTable-icon.open .layui-icon-triangle-d:before {
        content: "\e625";
    }
</style>